<script setup lang="ts">
import { ref, reactive } from 'vue'
import UploadComponent from '@/components/upload/UploadComponent.vue'
import { ElMessage } from 'element-plus'
import { addProductApi } from '@/api/product'
import router from '@/router'

const ruleFormRef = ref()

interface ProductForm {
    [key: string]: any
    title: string
    introduction: string
    detail: string
    cover: string
}

const productForm: ProductForm = reactive({
    title: '',
    introduction: '',
    detail: '',
    cover: '',
    file: {},
})

const rules = {
    title: [
        { required: true, message: '请输入产品标题', trigger: 'blur' },
        { min: 3, max: 25, message: '长度范围为 3 到 25 个字符', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请选择产品图片', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入产品简介', trigger: 'blur' },
    ],
    detail: [
        { required: true, message: '请输入产品详细描述', trigger: 'blur' },
    ],
}


const handleCoverChange = (file: File) => {
    productForm.cover = URL.createObjectURL(file)
    productForm.file = file
}

const onSubmit = () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            const params = new FormData()
            for (const i in productForm) {
                params.append(i, productForm[i])
            }
            const result = await addProductApi(params)
            ElMessage({
                type: 'success',
                message: result.data.msg
            })
            router.push({
                path: '/product-manage/productList'
            })
        }
    })
}

</script>

<template>
    <div>
        <img class="asideiImg" src="../../assets/productAdd.png">
        <el-form class="editForm" ref="ruleFormRef" :model="productForm" label-width="auto" label-position="left"
            size="large" :rules="rules">
            <el-form-item label="产品名称" prop="title">
                <el-input v-model="productForm.title" />
            </el-form-item>

            <el-form-item label="产品简介" prop="introduction">
                <el-input v-model="productForm.introduction" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" />
            </el-form-item>
            <el-form-item label="产品详情" prop="introduction">
                <el-input v-model="productForm.detail" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" />
            </el-form-item>
            <el-form-item label="产品图片" prop="cover">
                <UploadComponent :avatar="productForm.cover" @fileChange="handleCoverChange" />
            </el-form-item>

            <el-form-item>
                <div class="buttonBar">
                    <el-button class="submitBtn" type="primary" plain @click="onSubmit">添加</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang='less' scoped>
.asideiImg {
    position: absolute;
    top: 18%;
    right: 8%;
    z-index: 1;
    width: 580px;
}

.upload-demo {
    width: 550px;
}

.el-input,
.el-select {
    width: 62%;
    margin-bottom: 20px;
}

.el-button {
    margin-left: 5%;
    width: 800px;
}

.el-textarea {
    width: 55%;
}
</style>